<template>
  <div id="companyDetail">
    <div class="jd_top">
      <el-row style="padding-top:30px">
        <el-col :span="4">
          <div class="grid-content bg-purple"></div>
        </el-col>
        <el-col :span="16">
          <div class="jd_top_left">
            <div  style="margin-top:20px">
              <div class="company_img">
                <img style="width:100px;height:100px"
                     :src="company.companyLogoUrl"
                     alt="">
              </div>
              <div class="company-info">
                <h1>{{ company.companyName }}</h1>
                <p class="company_text" style="margin: 16px 0;">
                  {{ company.companyScale }}
                  <span>·</span> {{ company.industry }}
                  <span>·</span> {{ company.companyType==0?'国企':company.companyType==1?'央企':company.companyType==2?'民企':'外企' }}
                  <span>·</span>  {{ company.financeList }}
                </p>
              </div>
            </div>
          </div>
          <div class="jd_top_right">
            <div style="margin-top: 40px">
              <div style="display: inline-block;text-align: center;">
                <div style="font-size:30px;">56</div>
                在招职位
              </div>
              <div style="display: inline-block;margin-left:30px;text-align:center">
                <div style="font-size:30px;">92</div>
                注册用户
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple"></div>
        </el-col>
      </el-row>
    </div>
    <div class="jd_bottom">
      <el-row style="padding-top:30px">
        <el-col :span="4">
          <div class="grid-content bg-purple"></div>
        </el-col>
        <el-col :span="16">
          <div class="jd_bottom_left">
            <el-tabs active-name="first" >
              <el-tab-pane label="公司信息" name="first">
                <div class="jd_detail">
                  <div style="font-size:18px; ">公司简介</div>
                  <el-divider></el-divider>
                  <div class="text_detail">
                 {{company.companyInfo}}
                  </div>
                  <div style="font-size:18px;margin-top: 20px ">经营范围</div>
                  <el-divider></el-divider>
                  <div class="text_detail">
                   {{company.businessScope}}
                  </div>
                  <div style="font-size:18px;margin-top: 20px ">工商信息</div>
                  <el-divider></el-divider>
                  <el-descriptions :column="2">
                    <el-descriptions-item label="法人代表">{{ company.legalPerson }}</el-descriptions-item>
                    <el-descriptions-item label="注册资本">{{company.registeredCapital}}</el-descriptions-item>
                    <el-descriptions-item label="成立时间">{{company.buildTime}}</el-descriptions-item>
                    <el-descriptions-item label="统一社会信用码">{{company.uniformCreditCode}}</el-descriptions-item>
                    <el-descriptions-item label="联系电话">{{ company.tel }}</el-descriptions-item>
                    <el-descriptions-item label="联系邮箱">{{company.email}}</el-descriptions-item>
                  </el-descriptions>

                  <div style="font-size:18px;margin-top: 20px ">公司地址</div>
                  <el-divider></el-divider>
                  <div id="containerMap">
                  </div>
                  <div class="text_detail" style="margin-top:5px"><span class="el-icon-map-location"></span>{{company.address}}</div>
                </div >
              </el-tab-pane>
              <el-tab-pane label="在招职位" name="second">

                <div class="re-item" v-for="job in jobList" :key="job.jobId" @click="goJobDetail(job.jobId)" >
                  <div class="sub-li-left">
                    <p class="name">{{job.jobName}}</p>
                    <p class="salary">{{job.minSalary}}-{{job.maxSalary}}</p>
                    <p class="job-text">  {{codeToText(job.cityCode)}}
                      <el-divider direction="vertical"></el-divider>
                      {{job.experience}}
                      <el-divider direction="vertical"></el-divider>
                      {{job.minEdu}}
                    </p>
                    <el-divider direction="horizontal"></el-divider>
                    <p class="job-text">
                      {{job.jobPattern}}
                      <span style="float: right">更新于{{job.updateTime}}</span>
                    </p>
                  </div>
                  <span v-show="job.jobProperty==1" :style="bage" class="badge">
             校招职位
      </span>
                </div>
              </el-tab-pane>
              <el-tab-pane label="企业用户" name="third">
                <div class="jd_user" style="width:100%;height:80px;cursor:pointer;position:relative" v-for="user in userList" :key="user.userId">
                  <el-avatar style="width:60px;height:60px;vertical-align: bottom"
                             :src="user.photoUrl"></el-avatar>
                  <div class="profile-info-cont" style="width:87%;">
                    <span v-show="user.pickName === ''" style="font-size:18px;  font-weight: 600;">{{ user.userName }}</span>
                    <span style="font-size:18px;  font-weight: 600;">{{ user.pickName }}</span>
                    <div class="introduce">
                <span
                    style="display: inline-block; width:140px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
                 {{user.position }}
                </span>
                      <el-button icon="el-icon-chat-dot-square" type="text"  style="font-size:26px;position:absolute;right:0;top:0;">
                      </el-button>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="官网投递" name="five" >
                <el-descriptions :column="1">
                  <el-descriptions-item label="官网链接">
                    <el-link :href="company.officialWebsiteUrl" target="_blank" type="primary">{{company.officialWebsiteUrl}}</el-link>
                  </el-descriptions-item>
                  <el-descriptions-item label="投递链接">
                    <el-link :href="company.recruitUrl" target="_blank" type="primary">{{ company.recruitUrl }}</el-link>
                  </el-descriptions-item>
                </el-descriptions>
              </el-tab-pane>
              <el-tab-pane label="面试经验" name="four">
                <div class="article_item">
                  <div class="item_top">
                    <div class="publish_user">
                      <el-avatar style="width:30px;height:30px;vertical-align: middle"
                                 src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                      <span class="publish_name">牛客278890698号</span>
                    </div>
                    <span class="publish_category">面试经历</span>
                  </div>
                  <div class="content">
                    <div class="publish_title">2023届前端暑期实习求职总结</div>
                    <div class="publish_content">暑期实习的求职总算到了尾声了，自己在决赛圈终于收获了网易云的offer，
                      自己在决赛圈终于收获了网易云的offer，自己在决赛圈终于收获了网易云的offer，自己在决赛圈终于收获了网易云的offer，
                      自己在决赛圈终于收获了网易云的offer，焦虑清零！ 双非硕，3.3写完小论文开始准备面试相关的内容，这时和师兄的交流才知道，
                      最好三月中旬之前能投简历，因为有些大厂流程比较慢
                    </div>
                    <div class="publish_detail">
                      <span><i class="iconfont icon-good">19</i></span>
                      <span style="padding-left:15px;"><i class="iconfont icon-comment">10</i></span>
                      <span style="float:right">发布于 2022-05-16 12:35</span>
                    </div>
                    <el-divider direction="horizontal"></el-divider>
                  </div>
                </div>
                <div class="article_item">
                  <div class="item_top">
                    <div class="publish_user">
                      <el-avatar style="width:30px;height:30px;vertical-align: middle"
                                 src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                      <span class="publish_name">牛客278890698号</span>
                    </div>
                    <span class="publish_category">面试经历</span>
                  </div>
                  <div class="content">
                    <div class="publish_title">2023届前端暑期实习求职总结</div>
                    <div class="publish_content">暑期实习的求职总算到了尾声了，自己在决赛圈终于收获了网易云的offer，
                      自己在决赛圈终于收获了网易云的offer，自己在决赛圈终于收获了网易云的offer，自己在决赛圈终于收获了网易云的offer，
                      自己在决赛圈终于收获了网易云的offer，焦虑清零！ 双非硕，3.3写完小论文开始准备面试相关的内容，这时和师兄的交流才知道，
                      最好三月中旬之前能投简历，因为有些大厂流程比较慢
                    </div>
                    <div class="publish_detail">
                      <span><i class="iconfont icon-good">19</i></span>
                      <span style="padding-left:15px;"><i class="iconfont icon-comment">10</i></span>
                      <span style="float:right">发布于 2022-05-16 12:35</span>
                    </div>
                    <el-divider direction="horizontal"></el-divider>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>


          </div>
          <div class="jd_bottom_right">
            <div>
              <PhoneLogin></PhoneLogin>
            </div>
            <div  style="cursor:pointer;padding: 20px;  background-color: white;margin-top: 20px;">
              <div style="font-size:18px; ">法人信息</div>
              <el-divider></el-divider>
              <div class="jd_user" style="width:100%;height:80px;cursor:pointer">
                <el-avatar :size="60" style="vertical-align: bottom">
                  <svg class="font-icon" aria-hidden="true" style="width:60px;height:60px;">
                    <use xlink:href="#icon-a-ziyuan112"></use>
                  </svg>
                </el-avatar>

                <div class="profile-info-cont">
                  <span style="font-size:18px;  font-weight: 600;">{{ company.legalPerson }}</span>
                  <div class="introduce">
                <span
                    style="display: inline-block; width:140px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
                  企业法人
                </span>
                  </div>
                </div>
              </div>
              <div style=" color: #8b8e99;font-size: 16px;">{{company.legalPersonInfo}}</div>
            </div>
            <div style="height: 200px;width:100%;margin-top: 5px">
              <el-image fit="fit" alt="" :src="img"></el-image>
            </div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple"></div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
import PhoneLogin from "@/components/common/PhoneLogin";
import img from "@/assets/img/recruitBanner.png";
import {getCompany, getCompanyUserList, getJobList} from "@/network/recruit";
import {CodeToText} from "element-china-area-data";
export default {
  name: "CompanyDetail",
  components:{
    PhoneLogin
  },
  data() {
    return {
      img:img,
      collect: false,
      map: null,
      bage:{
        backgroundImage:'url('+require("../../assets/img/schoolTag.png")+')',
        backgroundRepeat:'no-repeat',
      },
      schoolRecruit:true,
      company:'',
      companyId:'',
      jobList:'',
      userList:'',

    }
  },
  created() {
    if(this.$route.params.companyId!=undefined){
      this.companyId = this.$route.params.companyId;
      sessionStorage.setItem("companyId", this.companyId);
    }
    this.findCompany(sessionStorage.getItem("companyId"));
  },
  methods: {
    initMap() {
      AMapLoader.load({
        key: "c0ad1f48b4289ecba0c417b8c1c8cb5b",             // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.PlaceSearch'],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
        this.map = new AMap.Map("containerMap", {  //设置地图容器id
          viewMode: "3D",    //是否为3D地图模式
          zoom: 10,           //初始化地图级别
        });
        let MSearch = new AMap.PlaceSearch({
          city: '010',
          map: this.map,
          pageSize: 1, //每页结果数,默认10
          pageIndex: 1, //请求页码，默认1
        });
        MSearch.search(this.company.address, function () {

        });
      }).catch(e => {
        console.log(e);
      });
    },
    codeToText(value){
      return CodeToText[value];
    },
    goJobDetail(jobId){
      this.$router.push({name:'jobDetail',params:{jobId:jobId}});
    },
    findCompany(companyId){
      getCompany(companyId).then(res=>{
        this.company = res.data.data;
        this.allJobList(this.company.companyName);
        this.companyUserList(this.company.companyName);
      })
    },
    allJobList(data){
      getJobList(data,1,10).then(res=>{
        this.jobList = res.data.data.list;
      })
    },
    companyUserList(data){
      getCompanyUserList(data).then(res=>{
        this.userList = res.data.data;
        console.log(res);
      })
    },
  },

  mounted() {
    //DOM初始化完成进行地图初始化
    this.initMap();
  }
}
</script>

<style scoped>
.grid-content {
  min-height: 50px;
  font-size: 14px;
}

.jd_top {
  background: #444c60 url(../../assets/img/detail-bg.jpg) center center no-repeat;;
}

.jd_top_left {
  width: 50%;
  height: 200px;
  color: white;
  float: left;
}

.jd_top_right {
  width: 50%;
  height: 200px;
  color: white;
  float: right;
  text-align: right;
  line-height: 50px;
}

.jd_bottom_left {
  width: 63%;
  background-color: white;
  float: left;
  padding: 20px;
}

.jd_bottom_right {
  width: 31%;
  margin-left:20px;
  float: left;
}

.profile-info-cont {
  margin-left: 20px;
  display: inline-block;
  color: #424a5e;
}

.introduce {
  padding-top: 8px;
  color: #8b8e99;
  font-size: 14px;
}

.el-divider--horizontal {
  margin: 10px 0;
}

.text_detail {
  word-break: break-all;
  word-wrap: break-word;
  color: #51586d;
  line-height: 36px;
  font-size: 14px;
}

#containerMap {
  width: 100%;
  height: 180px;
}

.com_detail {
  margin: 8px 0;
}


.company-info {
  display: inline-block;
  height: 50px;
  margin-left: 16px;
}

.company-info h1 {
  font-weight: 500;
  margin: 7px 0 0 0;
  padding: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.company_text {
  height: 28px;
  line-height: 28px;
  font-size: 14px;
  color: rgba(255,255,255,.7);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.company_img{
  display: inline-block;
  height: 100px;
  width: 100px;
  line-height: 100px;
  text-align: center;
  border-radius: 10px;
  overflow: hidden;
  float: left;
}

.sub-li-left {
  width: 100%;
  display: inline-block;
}

.sub-li-right {
  width: 50%;
  display: inline-block;
}
.badge{
  position: absolute;
  width: 56px;
  height: 24px;
  padding-left: 5px;
  top: 0;
  left: -5px;
  font-size: 12px;
  color: #fff;
  line-height: 20px;
}
p {
  margin: 0 0;
}

.name {
  display: inline-block;
  font-size: 18px;
  color: #428af5;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.salary {
  width: 20%;
  height: 30px;
  line-height: 30px;
  text-align: left;
  display: inline-block;
  color: #fc6c38;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-text {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  font-size: 13px;
  color: #8d92a1;
  width:100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.el-divider--horizontal {
  height: 0.5px;
  margin: 5px 0 5px 0;
}
.article_content {
  padding: 10px 20px 20px 20px;
}

.hot_article {
  width: 97.5%;
  height: 420px;
  background-color: white;
  margin-left: 10px;
}

.el-divider--horizontal {
  height: 0.5px;
  margin: 5px 0 5px 0;
}

.filter {
  padding: 10px 20px 0 20px;
}

.choice {
  padding: 10px 20px 0 20px;
}

.publish_name {
  color: cornflowerblue;
}

.publish_user {
  display: inline-block;
  height: 30px;
}

.publish_name {
  position: relative;
  top: 3px;
  padding-left: 5px;
}

.publish_category {
  font-size: 14px;
  position: relative;
  top: 8px;
  color: #8a8a8a;
  float: right;
}

.publish_title {
  font-size: 16px;
  font-weight: bold;
  margin-top: 7px;
}

.publish_content {
  margin-top: 5px;
  color: #8a8a8a;
  font-size: 14px;
  height: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  /* 限制在一个块元素显示的文本的行数 */
  /* -webkit-line-clamp 其实是一个不规范属性，使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；*/
  -webkit-line-clamp: 3;
  /* 设置或检索伸缩盒对象的子元素的排列方式 */
  -webkit-box-orient: vertical;
}

.publish_detail {
  color: #8a8a8a;
  margin-top: 5px;
  font-size: 14px;
}

.article_item {
  margin-bottom: 20px;
  cursor: pointer;
}

.article_item .el-divider--horizontal {
  height: 0.5px;
  margin: 20px 0 5px 0;
}
.re-item{
  position: relative;padding:20px 0;
  cursor: pointer;
}
</style>